import React, { Component } from 'react';
import { View, Text, StyleSheet, StatusBar } from 'react-native';
import { NavigationBar, SearchInput } from "teaset";

export default class TypePage extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                {/* 分类 搜索导航栏 */}
                <NavigationBar
                    style={styles.NavigationBar}
                    title={
                        <SearchInput
                            style={styles.SearchInput}
                            iconSize={16}
                            placeholder='搜索您店铺需要的菜品或调味品'
                            inputStyle={styles.inputStyle}
                            placeholderTextColor='#aaa'
                        />
                    }
                />
                {/* 分类 搜索导航栏  结束 */}

                {/* 系统状态栏 */}
                <StatusBar androidStatusBarColor='rgba(176,13,13,0.54)' translucent={true}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。  
                />
            </View>
        )
    }
};

const styles = StyleSheet.create({
    NavigationBar: {
        backgroundColor: 'rgba(255,255,255,1)'
    }, 
    SearchInput: {
        width: '96%',
        backgroundColor: 'rgba(255,255,255,1)',
    },
    inputStyle: {
        color: '#333'
    },
});
